// 条件渲染 类似于v-if  v-show。 react原生的语法就是 if else
const flag = false
const loading = true
const MyHeader = () => {
  if(flag) {
    return (
      <div>
        测试---真值
      </div>
    )
  }
  // return  (<p>测试---假值</p>)
  return  null  // 表示页面没有结构可以渲染
  // return后面一定要写值，如果不写，那么就是默认的 undefined
}

function App() {
  return (
    <div>
      {/* 条件渲染的写法有 逻辑中断 和 三元表达式  或者普通函数if--else结构 */}
      { flag && <h1>测试条件渲染</h1>}
      { loading ? (<span>加载中。。。</span>) : (<p>去发请求</p>)}
      { MyHeader() }
    </div>
  )
}

export default App